<!DOCTYPE HTML>
<html>
<head>
<#include "../common/_meta.html">
    <style>
        /*修改提示文字的颜色*/
        input::-webkit-input-placeholder { /* WebKit browsers */
            color: red;
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: red;
        }
        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: red;
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+ */
            color: red;
        }
    </style>
</head>
<body>
<article class="cl pd-20">
    <form class="layui-form" id="from-register-user">
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>用户名：</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" lay-verify="required" style="width:320px;" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>昵称：</label>
            <div class="layui-input-block">
                <input type="text" id="nickName" name="nickName" lay-verify="required" style="width:320px;" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">等级：</label>
            <div class="layui-input-block" style="width:320px;">
                <select id="level" name="level" lay-filter="aihao">
                    <option value="2" name="level">用户</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>密码：</label>
            <div class="layui-input-block">
                <input type="password" id="pwd" name="pwd" lay-verify="required" style="width:320px;" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>确认密码：</label>
            <div class="layui-input-block">
                <input type="password" id="pwd2" name="pwd2" lay-verify="required" style="width:320px;" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">注册</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</article>

<#include "../common/_footer.html">

<script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;
        //form.render(); //更新全部
        form.render('select', 'required'); //刷新select选择框渲染
        //各种基于事件的操作，下面会有进一步介绍
    });
    $("#from-register-user").validate({
        rules:{
            name:{
                required:true
            },
            nickName:{
                required:true
            },
            pwd:{
                required:true,
                minlength:6,
                maxlength:16
            },
            pwd2:{
                required:true,
                minlength:6,
                maxlength:16,
                equalTo: "#pwd"
            },
        },
        onkeyup:false,
        focusCleanup:true,
        success:"valid",
        submitHandler:function(){
            invoke();
        }
    });

    /* 注册用户信息 */
    function invoke() {
        var index = layer.load(2);
        $.ajax({
            type: "POST",
            url: "${base}/user/add",
            data: $('#from-register-user').serialize(),
            dataType: "json",
            success: function (result) {
                layer.close(index);
                if(result.code == 0) {
                    layer.msg("注册成功", {icon:6,time:1000}, function () { layer_close();});
                } else {
                    layer.alert("注册失败", {icon:5,time:1000}, function () {layer_close();});
                }
            },
            error: function () {
                layer.close(index);
                layer.msg("内部错误", {icon:5,time:1000}, function () {layer_close();});
            }
        });
    }

    // 检查用户名是否已经存在
    $("#name").blur(function () {
        var name = $("#name").val();
        $.ajax({
            type: 'GET',
            async : false, // 同步请求
            url: '/user/add/check',
            data : {
                name : name
            },
            dataType: 'json',
            scriptCharset : 'utf-8',
            timeout : 5000,
            success: function(result) {
                console.log(result);
                if(result.code == 1) {
                    $("#name").val("").focus();
                    $("#name").attr("placeholder", '该用户名已经存在');
                }
            },
            error: function() {
                layer.msg("内部错误", {icon:5,time:2000}, function () {layer_close();});
            }
        });
    });
</script>
</body>
</html>